<template>
  <div class="h-section">
    <Layout @click.native="toggle" class="h-section-title">
      <LayoutBody class="h-section-item">
        {{ title }}
      </LayoutBody>
      <LayoutSide class="h-section-item" style="padding-right: 10px">
        <Icon type="down" :class="['h-section-item-icon',{'h-section-item-icon-expand': visible}]"/>
      </LayoutSide>
    </Layout>
    <Animation :duration="300" type="verticalExpand">
      <div v-show="visible" key="h-section-body">
        <div class="h-section-body">
          <slot/>
        </div>
      </div>
    </Animation>
  </div>
</template>
<script>
import Layout from '@/components/flow/layout/Layout.vue';
import LayoutSide from '@/components/flow/layout/LayoutSide.vue';
import LayoutBody from '@/components/flow/layout/LayoutBody.vue';
import {Icon} from 'ant-design-vue';
import Animation from '@/components/Animation/Animation.vue';
import {createProps} from '@/utils';

export default {
  name: 'Section',
  components: {
    Layout,
    Icon,
    Animation,
    LayoutSide,
    LayoutBody
  },
  props: {
    defaultExpand: createProps(Boolean, true),
    title: createProps(String),
  },
  mounted() {
    this.visible = this.defaultExpand;
  },
  data() {
    return {
      visible: true
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    }
  },
  watch: {
    defaultExpand: {
      handler() {
        this.visible = this.defaultExpand;
      },
      immediate: true
    }
  }
};
</script>

<style>
.h-section {
}

.h-section-title {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;

  background: #e6f4ff;
  border-radius: 4px;
  border: 1px solid #91caff;
  padding-left: 10px;
  color: #1677ff;
  cursor: pointer;
}

.h-section-body {
  padding: 10px 20px;
}

.h-section-item {
  display: flex;
  align-items: center;
}

.h-section-item-icon {
  transition: transform ease 300ms;
}

.h-section-item-icon-expand {
  transform: rotate(180deg);
}
</style>
